
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/yugu" style="color: #409eff;">设置商品预估收入</router-link></div>
          -->
		  <div class="hei10"></div>
		  <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
		    当前位置：
		    <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
		    <router-link to="/productionDelivery" style="color: #409eff;">在售商品管理</router-link>>
		    设置商品预估收入
		  </div>
		  <div class="hei10"></div>

                <div class="qdcenter">
                  <div class="qdtitle">设置商品预估收入</div>
                  <div class="qdtop">
                    <div class="flexf" style="justify-content: space-between;">
                      <div class="flexf">
                        <div style="line-height: 36px;">商品名称</div>
                        <div><el-input v-model="input" placeholder="请输入内容"></el-input></div>
                        <div><el-button type="danger" @click="search">搜索</el-button></div>
                      </div>

                    </div>
                  </div>
                  <div class="qdlist" v-loading="loading">
                    <div class="list listth flexf">
                        <div class="th">商品名称</div>
                        <div class="th">商品发布时间</div>
                        <div class="th">预估佣金收入</div>
                        <div class="th">拼多多佣金发放率</div>
                        <div class="th">天猫佣金发放率</div>
                        <div class="th">京东佣金发放率</div>
                        <div class="th">微信佣金发放率</div>
                    </div>
                    <div class="list listtd flexf" v-for="item in list" :key="item.id">
                        <div class="td">{{item.title}}</div>
                        <div class="td">{{item.created_at}}</div>
                        <div class="td">{{item.profit}}<i class="el-icon-edit" @click="xiugai('预估佣金收入',item.id,item.title,'profit',item.profit)"></i></div>
                        <div class="td">{{item.pdd_rate * 100}}%<i class="el-icon-edit" @click="xiugai('拼多多佣金发放率(写百分比)',item.id,item.title,'pdd_rate',item.pdd_rate)"></i></div>
                        <div class="td">{{item.tm_rate * 100}}%<i class="el-icon-edit" @click="xiugai('天猫佣金发放率(写百分比)',item.id,item.title,'tm_rate',item.tm_rate)"></i></div>
                        <div class="td">{{item.jd_rate * 100}}%<i class="el-icon-edit" @click="xiugai('京东佣金发放率(写百分比)',item.id,item.title,'jd_rate',item.jd_rate)"></i></div>
                        <div class="td">{{item.wechat_rate * 100}}%<i class="el-icon-edit" @click="xiugai('微信佣金发放率(写百分比)',item.id,item.title,'wechat_rate',item.wechat_rate)"></i></div>
                    </div>
                    <el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
                  </div>
                </div>
            </div>
        </div>
		<foot></foot>
	</div>
</template>

<script>
	import axios from "axios";
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'

	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name: 'yugu',
		data(){
			return{
        input:"",
        page:1,
        pagesize:20,
        total:0,
        loading:false,
        list:"",
        xiugailog:false
			}
		},
		created() {
		  this.loading = true
      this.getlist()

		},
    methods:{
      timechange:function(){
          this.start = this.time[0]
          this.end = this.time[1]
      },
      search:function(){
          this.page = 1
          this.getlist()
      },
      //翻页
      fanye:function(page){
      	this.loading = true
      	this.page = page
      	this.getlist()
      },
      //获取列表
      getlist:function(){
          var that = this
          axios.get('/api/plan-market/profit/list?page='+this.page+'&page_size='+this.pagesize+'&name='+this.input)
          	.then(response => {
          		if(response.data.msg.code == 0){
                that.list = response.data.data.data
                that.total = response.data.data.total
                that.loading = false
          		}else{
          			that.$message.error(response.data.msg.info);
          		}
          	})
      },
      xiugai:function (name,id,title,fix,num) {
        var that = this
        this.$prompt('请输入'+name, title, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          var data = {}
          data[fix] = value / 100
          data['id'] = id
          if(num == null){
            axios.post('/api/plan-market/profit/create',data)
              .then(response => {
                if(response.data.msg.code == 0){
                  that.loading = true
                  that.getlist();
                }else{
                  that.$message.error(response.data.msg.info);
                }
              })
          }else{
            axios.post('/api/plan-market/profit/update',data)
              .then(response => {
                if(response.data.msg.code == 0){
                  that.loading = true
                  that.getlist();
                }else{
                  that.$message.error(response.data.msg.info);
                }
              })
          }

        }).catch(() => {

        });
      }
    },
    mounted(){

    }
	}
</script>


<style lang="scss" scoped>
	.index{

      .team{ background: #F9F9F9;}
      .powertop{ display: flex; width: 640px; }
      .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #F9F9F9 solid; color: #727272; border-right: 1px #F9F9F9 solid; font-size: 14px; text-align: center;}
      .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}

      .title{ background: #F9F9F9; padding:20px;}
      #main{ width: 100%; height:600px;}

      .qdcenter{
        .qdtitle{ padding:0 0 0px 20px; font-size: 16px; background: #F9F9F9; line-height: 40px;}
        .list{ text-align: center; line-height: 50px;
          .th{ flex: 1; background: #F9F9F9; font-weight: bold;}
          .td{ flex: 1; border-bottom: 1px #F9F9F9 solid; height: 50px; overflow: hidden; font-size: 14px;
            i{color: #3B68FB; padding: 5px; font-size: 16px;}
          }
        }
      }
      .qdtop{padding: 30px 20px;
        div{ margin-right: 10px;}
        .el-button--danger{ }
        .month{ line-height: 24px; position: relative; height: 24px; top:6px; border:1px #F9F9F9 solid; font-size: 14px; padding: 0 6px; cursor:pointer;}
        .mact{ background: #EEF7FF; color:#FFFFFF;}
      }
      .flexf{ display: flex;}

	}
</style>
